<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// 本地存储
// 将用户的 状态/数据 存储在客户端本地

// http/https协议是无状态的，同一个客户端的这次请求和上次请求没有对应关系
// 对应服务器并不知道这两次请求是否来同一个人

// 本地存储主要作用：
// 1.实现跨页面共享数据
// 2.前端持久化存储数据

// 前端两种本地存储技术：
// cookie本地存储
// h5本地存储

// cookie
// cookie是一种会话跟踪技术，是存储在访问者计算机中的一小块数据
// 在web应用中，cookie用于记录用户状态
// cookie的特征：
// 1.cookie按域名存储，不能跨域访问
// 2.同一个网站多个页面共享一套数据
// 3.cookie会随着http请求自动发送到服务端
// 4.cookie存储空间较小
// 5.cookie可以设置有效期
// 6.没有方便的API操作
// 7.兼容性好

// document.cookie = 设置
// document.cookie 获取
// cookie过期浏览器会自动删除


// h5本地存储
// html5规范新增的一种本地存储技术
// h5本地存储有两种：
// localStorage 永久存储
// sessionStorage 临时存储
// h5本地存储的特征：
// 1.按域名存储，不能跨域访问
// 2.同一个网站多个页面共享一套数据
// 3.不会随着http请求自动发送到服务端
// 4.存储空间为5MB左右
// 5.不可用设置有效期
// 6.有现成API操作
// 7.低版本浏览器不兼容（IE678）

// localStorage.setItem()设置/修改数据
// localStorage.getItem()获取数据
// localStorage.removeItem()删除数据
// localStorage.length 数据总条数
// localStorage.key(index)返回指定下标的key名
// localStorage.clear()清空数据


// 服务端也可以操作cookie
// 服务端使用cookie-parser插件来操作cookie
// 服务端通过请求头获取到来自客户端的cookie数据
// 服务端通过响应头设置客户端的cookie数据


// session会话控制
// 在web应用中，session用于记录用户状态
// session由两部分组成：
// session id 加密字符串，存储在客户端的cookie中
// session data 数据，存储在服务器（内存/数据库）

// 使用session记录用户登录状态的流程：
// 1.前端发送登录请求
// 2.后端接收登录请求
// 3.后端执行 app.use('/',session()) 创建一个session
// 4.匹配到登录接口，执行对应的处理函数
// 5.验证登录是否成功
// 6.如果登录成功，向session中存储数据，会将session id返回给前端
// 7.如果登录失败，不会向session中存储数据，不会将session id返回给前端
// 8.前端收到后端的响应（响应头中设置cookie存储session id，响应数据在响应体中）
// 9.将登录结果反馈给用户

</script>    
</body>
</html>